/**
 * Filename: goods_list2.js
 * Author: xhh
 * Decription: 裸钻的js文件
 * Date: 2018.03.30
 */
 // 入口函数
 $(function(){
     $("#diamond_shape_list li").on("click",function (e) {
         paramCheckbox(e, $(this));
     });
    //  彩钻筛选
     $("#color_search").on("click", function () {
         var height = parseInt($(".color-search-cont").css("height"));
         if (height == 0) {
             $(".color-search-cont").animate({ "height": "134px" });
         } else {
             $(".color-search-cont").animate({ "height": "0" });
         }
     });
     // 高级搜索
     $("#advanced_search").on("click",function(){
         var height = parseInt($(".advanced-search-cont").css("height"));
         if (height=== 0) {
             $(".advanced-search-cont").animate({"height":"300"});
         } else {
             $(".advanced-search-cont").animate({ "height": "0" });
         }
     });
    // 钻石颜色多选
    $("#diamond_color li").on("click",function (e) {
        paramCheckbox(e,$(this));
    });
    // 钻石切工多选
    $("#diamond_cut li").on("click", function (e) {
        paramCheckbox(e, $(this));
    });
    // 钻石净度多选
    $("#diamond_clarity li").on("click", function (e) {
        paramCheckbox(e, $(this));
    });
    // 钻石对称多选
    $("#diamond_symmetry li").on("click", function (e) {
        paramCheckbox(e, $(this));
    });
    // 钻石抛光多选
     $("#diamond_polish li").on("click", function (e) {
        paramCheckbox(e, $(this));
    });
    // 钻石荧光多选
    $("#diamond_fluore li").on("click", function (e) {
        paramCheckbox(e, $(this));
    });


    // 价格滑动事件
    $("#diamond_price_slider .bar1").on("mousedown", function (e) {
        var $inputObj = $("#diamond_min_price");
        sliderToMax($(this), e, $inputObj, 200, 50000);
    });
    $("#diamond_price_slider .bar2").on("mousedown", function (e) {
        var $inputObj = $("#diamond_max_price");
        sliderToMin($(this), e, $inputObj, 200, 50000);
    });
    // 价格输入事件
     $("#diamond_min_price").on("keyup", function () {
        onlyNum($(this));
    });
     $("#diamond_max_price").on("keyup", function () {
        onlyNum($(this));
    });
    // 价格失去焦点事件
     // 婚戒最小值输入框失去焦点事件
     $("#diamond_min_price").on("blur", function () {
         var $valObj = $("#diamond_max_price");
         var $silderObj = $("#diamond_price_slider");
         inputIsValid("min", $(this), $valObj, $silderObj, 200, 50000, 362);
     });
     $("#diamond_max_price").on("blur", function () {
         var $valObj = $("#diamond_min_price");
         var $silderObj = $("#diamond_price_slider");
         inputIsValid("max", $(this), $valObj, $silderObj, 200, 50000, 362);
     });

    // 克拉滑动事件
    $("#diamond_carat_slider .bar1").on("mousedown", function (e) {
        var $inputObj = $("#diamond_min_carat");
        sliderToMax($(this), e, $inputObj, 0.25, 10);
    });
    $("#diamond_carat_slider .bar2").on("mousedown", function (e) {
        var $inputObj = $("#diamond_max_carat");
        sliderToMin($(this), e, $inputObj, 0.25, 10);
    });
    // 克拉输入事件
    $("#diamond_min_carat").on("keyup", function () {
        onlyTwoNum($(this));
    });
    $("#diamond_max_carat").on("keyup", function () {
        onlyTwoNum($(this));
    });
    // 克拉失去焦点事件
    $("#diamond_min_carat").on("blur", function () {
        var $valObj = $("#diamond_max_carat");
        var $silderObj = $("#diamond_carat_slider");
        inputIsValid("min", $(this), $valObj, $silderObj, 100, 20000, 362);
    });
    $("#diamond_max_carat").on("blur", function () {
        var $valObj = $("#diamond_min_carat");
        var $silderObj = $("#diamond_carat_slider");
        inputIsValid("max", $(this), $valObj, $silderObj, 100, 20000, 362);
    });

    // 每克拉价格滑动事件
    $("#carat_price_slider .bar1").on("mousedown", function (e) {
        var $inputObj = $("#min_carat_price");
        sliderToMax($(this), e, $inputObj, 100, 20000);
    });
    $("#carat_price_slider .bar2").on("mousedown", function (e) {
        var $inputObj = $("#max_carat_price");
        sliderToMin($(this), e, $inputObj, 100, 20000);
    });
    // 每克拉价格输入事件
    $("#min_carat_price").on("keyup", function () {
        onlyTwoNum($(this));
    });
    $("#max_carat_price").on("keyup", function () {
        onlyTwoNum($(this));
    });
    // 每克拉价格失去焦点事件
    $("#min_carat_price").on("blur", function () {
        var $valObj = $("#max_carat_price");
        var $silderObj = $("#carat_price_slider");
        inputIsValid("min", $(this), $valObj, $silderObj, 100, 20000, 362);
    });
    $("#max_carat_price").on("blur", function () {
        var $valObj = $("#min_carat_price");
        var $silderObj = $("#carat_price_slider");
        inputIsValid("max", $(this), $valObj, $silderObj, 100, 20000, 362);
    });

     // 钻身滑动事件
     $("#diamond_depth_slider .bar1").on("mousedown", function (e) {
         var $inputObj = $("#diamond_min_depth");
         sliderToMax($(this), e, $inputObj, 0, 75);
     });
     $("#diamond_depth_slider .bar2").on("mousedown", function (e) {
         var $inputObj = $("#diamond_max_depth");
         sliderToMin($(this), e, $inputObj, 0, 75);
     });
     // 钻身输入事件
     $("#diamond_min_depth").on("keyup", function () {
         onlyTwoNum($(this));
     });
     $("#diamond_max_depth").on("keyup", function () {
         onlyTwoNum($(this));
     });
     // 钻身失去焦点事件
     $("#diamond_min_depth").on("blur", function () {
         var $valObj = $("#diamond_max_depth");
         var $silderObj = $("#diamond_depth_slider");
         inputIsValid("min", $(this), $valObj, $silderObj, 0, 75, 362);
     });
     $("#diamond_max_depth").on("blur", function () {
         var $valObj = $("#diamond_min_depth");
         var $silderObj = $("#diamond_depth_slider");
         inputIsValid("max", $(this), $valObj, $silderObj, 0, 75, 362);
     });

    // 台面滑动事件
    $("#diamond_mesa_slider .bar1").on("mousedown", function (e) {
        var $inputObj = $("#diamond_min_mesa");
        sliderToMax($(this), e, $inputObj, 0, 75);
    });
    $("#diamond_mesa_slider .bar2").on("mousedown", function (e) {
        var $inputObj = $("#diamond_max_mesa");
        sliderToMin($(this), e, $inputObj, 0, 75);
    });
    // 台面输入事件
    $("#diamond_min_mesa").on("keyup", function () {
        onlyTwoNum($(this));
    });
    $("#diamond_max_mesa").on("keyup", function () {
        onlyTwoNum($(this));
    });
    // 台面失去焦点事件
    $("#diamond_min_mesa").on("blur", function () {
        var $valObj = $("#diamond_max_mesa");
        var $silderObj = $("#diamond_mesa_slider");
        inputIsValid("min", $(this), $valObj, $silderObj, 0, 75, 362);
    });
    $("#diamond_max_mesa").on("blur", function () {
        var $valObj = $("#diamond_min_mesa");
        var $silderObj = $("#diamond_mesa_slider");
        inputIsValid("max", $(this), $valObj, $silderObj, 0, 75, 362);
    });
     


     /**
    * 滑向最大值
    * @param {*} that 
    * @param {*} e 
    * @param {*}  
    * @param {*} minValue 
    * @param {*} maxValue 
    */
     function sliderToMax(that, e, $inputObj, minValue, maxValue) {
         var $that = that;
         // 最小值
         var minValue = minValue;
         // 最大值
         var maxValue = maxValue;
         // 进度条实际长度
         var sliderWidth = parseInt($that.parent('.slider').css("width")) - parseInt($that.css("width"));
         // 输入框的值
         var inputvalue = minValue;
         // 距离屏幕左边距
         var leftVal = e.clientX - parseInt($that.css("left"));
         // 得到最大值小方块的left值
         var maxLeft = parseInt($that.siblings('.bar2').css("left"));
         var $that = $that;
         document.onmousemove = function (e) {
             // 设置小方块的left值
             $that.css({
                 "left": (e.clientX - leftVal),
                 "z-index": 10
             });
             // 得到最新的left值
             var minLeft = parseInt($that.css("left"));
             // 判断当前的值是否超出范围
            if (minLeft < 0) {
                $that.css("left", 0);
                minLeft = 0;
            } else if (minLeft > maxLeft) {
                // 不能大于最大值
                $that.css({
                    "left": maxLeft,
                    "z-index": 10
                });
                minLeft = maxLeft;
            }
            // 设置深色进度条的left值
            $that.siblings('.mask-slider').css("left", minLeft);
            // 计算显示值 判断是否到了最大值
            if (maxValue < 20) {
                inputvalue = returnFloat(minLeft * (maxValue / sliderWidth)) == 0 ? minValue : returnFloat(minLeft * (maxValue / sliderWidth));
            } else {
                inputvalue =  parseInt( minLeft * (maxValue / sliderWidth)) == 0 ? minValue : parseInt(minLeft * (maxValue / sliderWidth))
            }
            // 输入框赋值
            $inputObj.val(inputvalue);
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

         };
         // 弹起鼠标不做任何操作
         document.onmouseup = function () {
            document.onmousemove = null;
         }
     }
     /**
      * 拖向最小值
      * @param {*} that 
      * @param {*} e 
      * @param {*}  
      * @param {*} minValue 
      * @param {*} maxValue 
      */
     function sliderToMin(that, e, $inputObj, minValue, maxValue) {
         var $that = that;
         var minValue = minValue;
         var maxValue = maxValue;
         var sliderWidth = parseInt($that.parent('.slider').css("width")) - parseInt($that.css("width"));
         // 输入框的值
         var inputvalue = maxValue;
         // 得到left最大值
         var maxLeft = parseInt($that.css("left"));
         // 得到左边小方块的left值
         var minLeft = parseInt($that.siblings('.bar1').css("left"));
         var leftVal = e.clientX - maxLeft;
         document.onmousemove = function (e) {
             // 得到当前的left值
             maxLeft = e.clientX - leftVal;
             // 设置小方块的right值
             $that.css({
                 "right": (sliderWidth - maxLeft),
                 "z-index": 10
             });
             // 判断是否超出范围
             if (maxLeft < minLeft) {
                 $that.css("right", (sliderWidth - minLeft));
                 maxLeft = minLeft;
             } else if (maxLeft > sliderWidth) {
                 $that.css("right", 0);
                 maxLeft = sliderWidth;
             }
             // 设置进度条的right值
             $that.siblings('.mask-slider').css("right", (sliderWidth - maxLeft));
             // 判断是否到最小值
             if (maxValue < 20) {
                 inputvalue = returnFloat(maxLeft * (maxValue / sliderWidth)) == 0 ? minValue : returnFloat(maxLeft * (maxValue / sliderWidth));

             }else {
                 inputvalue = parseInt(maxLeft * (maxValue / sliderWidth)) == 0 ? minValue : parseInt(maxLeft * (maxValue / sliderWidth));
             }
             $inputObj.val(inputvalue);

             window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
         };
         // 弹起鼠标不做任何操作
         document.onmouseup = function () {
             document.onmousemove = null;
         }
     }

    /**
     * 其他钻石参数多选
     * @param {*} that 
     * @param {*} datasetName 
     */
    function paramCheckbox(e, that) {
        var $that = that;
        $that.addClass("on").siblings("li").removeClass("on");
        // 得到所有li元素
        var $inputObj = $that.parent().siblings("input")
        var val = $that.context.dataset.diamondParam;
        // 赋值给input
        $inputObj.val(val);
    }

     /**
      * 只能输入数字
      * @param {*} that 
      */
     function onlyNum(that) {
         var $that = that;
         var value = $that.val();
         if (/[^\d]/.test(value)) {
             //替换非数字字符    
             value = value.replace(/[^\d]/g, '');
             $that.val(value);
         }
     }
     function onlyTwoNum(that) {
         var $that = that;
         var value = $that.val();
         if (/[^\d\.]/.test(value)) {
             //替换非数字字符    
             value = value.replace(/[^\d\.]/g, '');
             $that.val(value);
         }
     }
     /**
      * 判断输入框的值是否合法，超范围
      * @param {*} that 
      * @param {*}  
      * @param {*}  
      * @param {*} minValue 
      * @param {*} maxValue 
      * @param {*} sliderW 
      */
     function inputIsValid(flag, that, $valObj, $silderObj, minValue, maxValue, sliderW) {
         var $that = that;
         // 输入框的值
         var inputVal = minValue < 5 ? returnFloat($that.val()) : parseInt($that.val());
         if (flag === 'min') {
             // 当前最大值
             var currentMaxValue = minValue < 5 ? returnFloat($valObj.val()) : parseInt($valObj.val());
             console.log(currentMaxValue);
             if (inputVal <= minValue) {
                 // 是否小于最小值
                 inputVal = minValue;
             } else if (inputVal > currentMaxValue) {
                 // 是否大于当前最大值
                 inputVal = currentMaxValue;
             } else if (inputVal > maxValue) {
                 // 是否大于最大值
                 inputVal = maxValue;
                 $silderObj.children(".bar1").css("z-index", 11);
             }
             // 等于最小值，不做运动
             if (inputVal == minValue) {
                 $silderObj.children(".bar1").animate({ "left": "0" });
                 $silderObj.children(".mask-slider").animate({ "left": "0" });
             } else {
                 $silderObj.children(".bar1").animate({ "left": parseInt(inputVal / (maxValue / sliderW)) });
                 $silderObj.children(".mask-slider").animate({ "left": parseInt(inputVal / (maxValue / sliderW)) });
             }
         } else {
             // 当前最小值
             var currentMinValue = minValue < 5 ? returnFloat($valObj.val()) : parseInt($valObj.val());
             if (inputVal < minValue) {
                 // 是否小于最小值
                 inputVal = minValue;
             } else if (inputVal < currentMinValue) {
                 // 是否大于当前最小值
                 inputVal = currentMinValue;
             } else if (inputVal >= maxValue) {
                 inputVal = maxValue;
                 // 是否大于等于最大值
                 $silderObj.children(".bar2").animate({ "right": "0" });
                 $silderObj.children(".mask-slider").animate({ "right": "0" });
             }
             // 动画效果
             $silderObj.children(".bar2").animate({ "right": sliderW - (parseInt(inputVal / (maxValue / sliderW))) });
             $silderObj.children(".mask-slider").animate({ "right": sliderW - (parseInt(inputVal / (maxValue / sliderW))) });
         }
         // input输入框赋值
         $that.val(inputVal);
     }
     /**
      * 两位小数
      * @param {*} value 
      */
     function returnFloat(value) {
         var value = Math.round(parseFloat(value) * 100) / 100;
         var xsd = value.toString().split(".");
         if (xsd.length == 1) {
             value = value.toString() + ".00";
             return value;
         }
         if (xsd.length > 1) {

             if (xsd[1].length < 2) {
                 value = value.toString() + "0";
             }
             return value;
         }
     }
 });